<template>
  <div class="layer-panel">
    <div class="land item">
      <div class="label">
        <span>宗地产权模型</span>
        <Switch :value="showLandRight" @on-change="landRightChange" style="float: right;"/>
      </div>
      <div class="opacity" v-if="showLandRight">产权模型透明度<Slider :min="0" :max="1" :step="0.05" @on-change="landRightOpacityChange" :value="landRightOpacity" style="width: 250px;"></Slider></div>
    </div>
    <div class="border-line"></div>
    <div class="building item">
      <div class="label">
        <span>建筑产权模型</span>
      </div>
      <Tabs :list="tabs" @on-change="clickTab" :activeTab="showBuildingsRight"/>
      <Legend v-if="showBuildingsRight"/>
      <div class="opacity" v-if="showBuildingsRight">产权模型透明度<Slider :min="0" :max="1" :step="0.05" @on-change="buildingRightOpacityChange" :value="buildingRightOpacity" style="width: 250px;"></Slider></div>
    </div>
  </div>
</template>

<script>
import Tabs from './Tabs.vue'
import {mapState} from 'vuex'
import Legend from './Legend.vue'
export default {
  components: {
    Tabs,
    Legend
  },
  methods: {
    clickTab(name) {
      this.$store.commit('patch_buldings_right', name)
    },
    landRightChange(value) {
      this.$store.commit('patch_land_right', value)
    },
    buildingRightOpacityChange(value) {
      this.$store.commit('patch_building_opacity', value)
    },
    landRightOpacityChange(value) {
      this.$store.commit('patch_land_opacity', value)
    }
  },
  data() {
    return {
      tabs: ['产权状态', '产权类型'],
      value1: 0.5,
      value2: 0.3
    }
  },
  computed: {
    ...mapState({
      showBuildingsRight: state => state.showBuildingsRight,
      showLandRight: state => state.showLandRight,
      landRightOpacity: state => state.landRightOpacity,
      buildingRightOpacity: state => state.buildingRightOpacity
    })
  },
}
</script>

<style lang="less" scoped>
.layer-panel{
  width: 300px;
  position: absolute;
  top: 32px;
  left: 20px;
  background: rgba(0, 41, 71, 0.62);
  box-shadow: inset 0px 0px 11px 0px rgba(120, 255, 252, 0.97), inset 0px 0px 6px 0px rgba(75, 245, 241, 0.46);
  border-radius: 10px;
  border: 1px solid #4BF5F1;
  padding: 20px;
  text-align: left;
  pointer-events: initial;
  .item:first-child{
    margin-bottom: 20px;
  }
  .label{
    font-size: 18px;
    font-weight: bold;
  }
  .opacity{
    font-size: 16px;
    margin-top: 10px;
  }
  .border-line{
    width: 242px;
    height: 1px;
    margin: 15px auto;
    background: linear-gradient(to right, rgba(130, 251, 249, 0), rgba(107, 248, 246, 1), rgba(101, 248, 245, 1), rgba(75, 245, 241, 0));
  }
  .building{
    margin-top: 10px;
  }
}
</style>